<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: sans-serif;
        }
        #outer{
            background-color: #bfa;
            overflow: hidden;
            position: relative;
        }
        #inside{
            position: absolute;
            top: 0;
        }
        #music{
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 1;
            width: 30px;
            height: 30px;
        }
        video{
            display: none;
        }
        #inside > div{
            overflow: hidden;
        }

        @keyframes zhuan {
            0%{transform: rotate(0deg)}
            50%{transform: rotate(180deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div id="music">
        <img src="./img/musiclogo.png" alt="">
        <video src="./audio/bgm.mp3"></video>
    </div>
    <div id="outer">
        <div id="inside">
            <div id="page1">
                <div>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 <br>
                </div>
            </div>
            <div id="page2">2</div>
            <div id="page3">3</div>
            <div id="page4">4</div>
            <div id="page5">5</div>
            <div id="page6">
                本页禁止翻页
                <button id="backToTop">返回首页</button>
            </div>
        </div>
    </div>

</body>
<script>

    let scnHeight = document.documentElement.clientHeight
    let scnWidth = document.documentElement.clientWidth
    let outer = document.getElementById('outer')
    let inside = document.getElementById('inside')
    let pages = document.querySelectorAll('#inside > div')
    let body = document.body
    const ANI_TIME = 500
    outer.style.width = scnWidth + 'px'
    outer.style.height = scnHeight + 'px'
    let toPageStatus = false
    let nowPage = 0
    for(let i = 0;i < pages.length;i++){
        pages[i].style.height = scnHeight + 'px'
        pages[i].style.width = scnWidth + 'px'
    }
    body.addEventListener('touchstart',touchStart)
    body.addEventListener('touchend',touchEnd)

    let startY
    function touchStart(event){
        startY = event.touches[0].pageY
    }

    function touchEnd(event){
        let spanY = event.changedTouches[0].pageY - startY
        if(spanY < -50 && toPageStatus === false && !(nowPage+1 === pages.length)){
            toPage(true)
        }else if(spanY > 50 && toPageStatus === false && !(nowPage-1 < 0)){
            toPage(false)
        }else {
            return false
        }

        function toPage(isNext){
            if(nowPage === 5){

            }else{
                toPageStatus = true
                let computedPosition
                inside.style.transition = `${ANI_TIME/1000}s ease-in-out`
                switch(isNext){
                    case true:
                        computedPosition = -scnHeight
                        nowPage++
                        break
                    case false:
                        computedPosition = scnHeight
                        nowPage--
                        break
                }
                inside.style.top = inside.offsetTop + computedPosition + 'px'
                setTimeout(function () {
                    toPageStatus = false
                    inside.style.transition = `0s ease-in-out`
                },ANI_TIME)
            }

        }
    }
    let toTop = document.getElementById('backToTop')
    toTop.onclick = function (){
        inside.style.top = 0 + 'px'
        nowPage = 0
    }

    // music control

    let musicdiv = document.getElementById('music')
    let video = document.getElementsByTagName('video')[0]
    let musicPlaying = false
    let promise = video.play()
    promise.then(function(){
        console.log('自动播放生效')
    },function (){
        console.error('自动播放失效')
    })
    musicdiv.onclick = function (){
        if(!musicPlaying){
            video.play()
            musicPlaying = true
            musicdiv.style.animation = '10s zhuan infinite'
        }else{
            video.pause()
            musicPlaying = false
            musicdiv.style.animation = '0s zhuan infinite'
        }
    }
</script>
</html>